import React, { Component } from 'react';
import PropTypes from 'prop-types'
import logo from './logo.svg';
import '../App.css';
import { Row, Col, Button, Select } from 'antd';

const Option = Select.Option;

class Counter extends Component {

  static propTypes = {
    count: PropTypes.number.isRequired,
    increment:PropTypes.func.isRequired,
    decrement:PropTypes.func.isRequired,
    incrementAsync:PropTypes.func.isRequired,
  }

  state = {
    count: 0,
    increment: 1
  }
  handleChange = (value) => {
    console.log(`selected ${value}`);
    this.setState({ increment: value * 1 })
  }
  /**
   * 增量
   */
  increment = () => {
    //this.setState({ count: this.state.count + this.state.increment })
    this.props.increment(this.state.increment)
  }
  incrementIfOdd = () => {
    const {count} = this.props
    if (count % 2 === 1) {
      // this.setState({ count: this.state.count + this.state.increment })
      this.props.increment(this.state.increment)
    }
  }
  incrementAsync = () => {
    this.props.incrementAsync(this.state.increment)
    /**setTimeout(() => {
      // this.setState({ count: this.state.count + this.state.increment })
      this.props.increment(this.state.increment)
    }, 1000)*/
  }

  /**
   * 减少量
   */
  decrement = () => {
    // this.setState({ count: this.state.count - this.state.increment })
    this.props.decrement(this.state.increment)
  }

  componentWillMount() {
    console.log(this.props)
  }

  render() {
    const {count} = this.props
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>click {count} times</p>
          <Row gutter={16} style={{ width: 900 + 'px' }}>
            <Col className="gutter-row" span={6}>
              <Select defaultValue={`${this.state.increment}`} style={{ width: '100%' }} onChange={this.handleChange}>
                <Option value="1">1</Option>
                <Option value="2">2</Option>
                <Option value="3">3</Option>
              </Select>
            </Col>
            <Col className="gutter-row" span={6}>
              <Button onClick={this.increment} style={{ width: '100%' }} >+</Button>
            </Col>
            <Col className="gutter-row" span={6}>
              <Button onClick={this.decrement} style={{ width: '100%' }} >-</Button>
            </Col>
          </Row>
          <Row gutter={16} style={{ width: 900 + 'px' }}>
            <Col className="gutter-row" span={6}>
              <Button onClick={this.incrementIfOdd} style={{ width: '100%' }} >increment if odd</Button>
            </Col>
            <Col className="gutter-row" span={6}>
              <Button onClick={this.incrementAsync} style={{ width: '100%' }} >increment if async</Button>
            </Col>
          </Row>
        </header>
      </div>
    );
  }
}

export default Counter;
